<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/iconfont.css" />
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <link href="css/mobiscroll.javascript.min.css" rel="stylesheet" type="text/css" />
    <script src="js/mobiscroll.javascript.min.js" type="text/javascript"></script>
    <script src="js/mock.js"></script>
    <title>優惠碼列表</title>
</head>

<body class="minipage">
    <div class="wrap">
        <div class="logocon">
            <div class="logoimg "><img src="./img/logo.png "></div>
            <div class="cont ">
                <p>O2O客戶服務平台（EC2）</p>
                <p>請關注粉絲專頁 <a href="javascript ">福皓整合科技</a></p>
            </div>
            <!-- <div class="sharecon ">
                <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FFull2house%2F&amp;width=50&amp;layout=box_count&amp;action=like&amp;size=large&amp;show_faces=false&amp;share=false&amp;height=65&amp;appId=382298112140973 "
                    width="50 " height="50 " style="border:none;overflow:hidden " scrolling="no " frameborder="0 " allowtransparency="true "></iframe>
            </div> -->
        </div>
        <section class="codecon">

            <dl>
                <dd class="ec_code clearfix">
                    <div class="ec_div1 txt_align_r">
                        <a href="javascript:;" class="btn btn-green-o"> 详 情 </a>
                    </div>
                    <div class="ec_div3">
                        <p class="code-name">優惠碼名稱</p>
                        <p class="code">優惠碼：ABBCKEIWOEIT</p>
                    </div>

                </dd>
                <dd class="ec_code clearfix">
                    <div class="ec_div1 txt_align_r">
                        <a href="javascript:;" class="btn btn-green-o"> 详 情 </a>
                    </div>
                    <div class="ec_div3">
                        <p class="code-name">優惠碼名稱</p>
                        <p class="code">優惠碼：ABBCKEIWOEIT</p>
                    </div>

                </dd>
                <dd class="ec_code clearfix">
                    <div class="ec_div1 txt_align_r">
                        <a href="javascript:;" class="btn btn-green-o"> 详 情 </a>
                    </div>
                    <div class="ec_div3">
                        <p class="code-name">優惠碼名稱</p>
                        <p class="code">優惠碼：ABBCKEIWOEIT</p>
                    </div>

                </dd>

            </dl>
            <p class="load_more" data-page="0"></p>
        </section>
    </div>
    <script type="text/javascript">
        $(function() {
            // 是否启用调试模式模拟加载更多
            var isDebug = 1;
            // 如果启用了调试模式，则MOCK数据 
            if (isDebug) {
                Mock.mock('loadList', {
                    "code": 0,
                    "msg": "成功",
                    "data|10": [{
                        "imgsrc": "@image('110x110','#ea4335','IMAGE')",
                        "price|1": ['909.99', '9.99'],
                        "status|1": ['待發貨', '已發貨'],
                        "orderNo|1": ['392309543', '328905809'],
                        "name|1": ['小明', '小妹'],
                        "date|1": ['2018-09-07', '2018-02-09']
                    }]

                });
            }
            var seachParams = {
                val: '1',
                date: ''
            }
            mobiscroll.date('#range', {
                theme: 'ios',
                lang: 'zh'
            });
            $(document).on('click', '.btn-select', function(e) {
                var par = $(this).closest('.btn-group');
                par.find('.dropdown-menu').toggle();
            });
            $(document).on('click', '.dropdown-menu>li>a', function(e) {
                $('.dropdown-menu').hide();
                var txt = $(this).text();
                var val = $(this).attr('data-value');
                if (val == seachParams.val) {
                    return false;
                }
                seachParams.val = $(this).attr('data-value');
                switch (seachParams.val) {
                    case '1':
                        $('.search').html('<input class="searchTxt" id="range" placeholder="日期">');
                        mobiscroll.date('#range', {
                            theme: 'ios',
                            lang: 'zh'
                        });
                        break;
                    case '2':
                        $('.search').html('<input class="searchTxt" placeholder="收貨人">');
                        break;
                    case '3':
                        $('.search').html('<input class="searchTxt" placeholder="訂單狀態">');
                        break;
                }
                $('.btn-select').find('font').text(txt);
            });
            $(document).on('click', '#btnSearch', function(e) {
                seachParams.date = $('.searchTxt').val();
                console.log(seachParams);
            });
            $(window).scroll(function() {
                var scrollTop = $(this).scrollTop();
                var scrollHeight = $(document).height();
                var windowHeight = $(window).height();
                if (scrollTop + windowHeight == scrollHeight) {

                    $('.load_more').text('加載中...');
                    //记录当前页数
                    var page = parseInt($('.load_more').attr('data-page')) + 1;
                    var params = {
                        "pagesize": page
                    }
                    loadList(params);

                }
            });

            function loadList(params) {
                $.ajax({
                    type: 'get',
                    url: 'loadList',
                    //data:params,
                    success: function(res) {
                        var d = res.data;
                        if (d.length > 0) {
                            var html = '';
                            for (var i = 0; i < d.length; i++) {
                                html += '<dd class="ec_goods clearfix">\
                    <div class="ec_div1 txt_align_r">\
                        <p class="price">NT$ ' + d[i].price + '</p>\
                        <p class="status">' + d[i].status + '</p>\
                    </div>\
                    <div class="ec_div2"><img src="' + d[i].imgsrc + '" alt=""></div>\
                    <div class="ec_div3">\
                        <p class="order-number">訂單號：' + d[i].orderNo + '</p>\
                        <p class="receiver">收貨人：' + d[i].name + '</p>\
                        <p class="date">' + d[i].date + '</p>\
                    </div>\
                    <div class="operate">\
                    <a href="javascript:;" class="btn btn-gray-o">檢視訂單</a>\
                    <a href="javascript:;" class="btn btn-green-o">重新下單</a></div>\
                </dd>';

                            }
                            $('dl').append(html);
                            $('.load_more').attr('data-page', params.pagesize);
                        } else {
                            $('.load_more').text('沒有更多數據了');
                        }
                    },
                    error: function(res) {
                        alert(res.msg);
                    },
                    dataType: 'json'
                });
            }
        })
    </script>
</body>

</html>